<template>
    <div class="steps">
        <div class="line"></div>
        <div class="node" 
             v-for="i in count" 
             :key="i"
             :style="styleObj(i)">{{content(i)}}</div>
    </div>
</template>

<script>
export default {
    computed:{
        styleObj(){
            return function(i){
                if(i>this.active){
                    return {borderColor:this.defaultColor,color:this.defaultColor}
                }else if(i===this.active){
                    return {borderColor:this.activeColor,color:this.activeColor}
                }else if(i<this.active){
                    return {borderColor:this.doneColor,color:this.doneColor}
                }
               
            }
        },
        content(){
            return function(i){
                return i<this.active?"✔":i
            }
        }
    },
    props:{
       count:{
          type:Number,
          required:true,
          default:3,
          validator:arg=>arg>2&&arg<=5
       },
       active:{
         type:Number,
         required:true,
         default:1
       },
       defaultColor:{
         type:String,
         default:'#ccc'
       },
       activeColor:{
         type:String,
         default:'#000'
       },
       doneColor:{
        type:String,
        default:'#35AFFB'
       }
    }
}
</script>

<style lang="scss">
    .steps{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 800px;
        height: 100px;
        .line{
            position:absolute;
            width: 100%;
            height: 2px;
            background-color: #ccc;
            z-index: 1;
        }
        .node{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            border:3px solid #000;
            border-radius: 50%;
            z-index: 2;
            background-color: #fff;
        }
    }
        
 
</style>